<template>
    <div class="device-info-container">
        <div class="title-wrapper">
            <p class="logo"></p>
            <p class="title"></p>
            <span class="time">
                {{ version }}
            </span>
        </div>
        <!-- 设备信息 -->
        <div
            class="device-info-wrapper"
            :style="{
                height:
                    status === 0 ? '86px' : status === 2 ? '142px' : '106px',
            }"
        >
            <p class="title">
                <span class="icon"></span>
                <span class="label">设备信息</span>
            </p>
            <p v-if="status === 0 || status === 2" class="device-info-content">
                <span class="left">
                    <span class="label">机型：</span>
                    <span class="value">{{ mode }}</span>
                </span>
                <span v-show="status === 0" class="right">
                    <span class="label">序列号：</span>
                    <span class="value">{{ mid }}</span>
                </span>
            </p>
            <p v-if="status === 1" class="content">
                未获取您的设备序列号和机型，视频直连服务暂不可使用
            </p>
            <p v-if="status === 2" class="content">
                当前机型暂不支持视频直连服务，如有需要，请选择屏幕下方的其他服务
            </p>
            <!-- 删除非工作时间 -->
            <!-- <p v-if="status === 3" class="content">
                当前时间段视频直连服务不可用，如有需要，请选择屏幕下方的其他服务
            </p> -->
        </div>
        <!-- 视频呼叫 -->
        <div class="call-button-container">
            <div class="call-button-section">
                <div
                    class="call-button-wrapper"
                    :class="status === 0 ? 'button-wrapper-1' : ''"
                    @click="onCall(serviceScene[0], '001')"
                >
                    <p class="title">
                        <span class="icon"></span>
                        <span class="label">设备故障类</span>
                    </p>
                    <p class="button">
                        <span class="label">立即视频呼叫</span>
                        <!-- <span class="icon"></span> -->
                        <van-icon
                            name="arrow"
                            class="icon"
                            color="#FFFFFF"
                            size="10"
                        />
                    </p>
                </div>
                <div
                    class="button-back"
                    :class="
                        status === 0
                            ? 'button-section-1'
                            : 'button-section-disable-1'
                    "
                ></div>
            </div>
            <div class="call-button-section">
                <div
                    class="call-button-wrapper"
                    :class="status === 0 ? 'button-wrapper-2' : ''"
                    @click="onCall(serviceScene[1], '007')"
                >
                    <p class="title">
                        <span class="icon"></span>

                        <span class="label">应用结果类</span>
                    </p>
                    <p class="button">
                        <span class="label">立即视频呼叫</span>
                        <!-- <span class="icon"></span> -->
                        <van-icon
                            name="arrow"
                            class="icon"
                            color="#FFFFFF"
                            size="10"
                        />
                    </p>
                </div>
                <div
                    class="button-back"
                    :class="
                        status === 0
                            ? 'button-section-2'
                            : 'button-section-disable-2'
                    "
                ></div>
            </div>
        </div>
        <!-- 获取设备信息以使用视频服务 -->
        <div v-if="[0, 1, 2].includes(status)" class="search-device-section">
            <p
                v-if="[0, 2].includes(status)"
                class="callable-title-1"
                @click="onSearch"
            >
                <span class="icon-1"></span>
                <span class="label-1">
                    {{ status === 0 ? "切换设备" : "其他设备视频服务" }}
                </span>
            </p>
            <p v-if="status === 1" class="callable-title" @click="onSearch">
                <span class="icon"></span>
                <span class="label">扫描设备二维码使用视频服务</span>
            </p>
        </div>
        <!-- 视频服务时间： -->
        <!-- 删除非工作时间 -->
        <!-- <div v-if="status === 3" class="working-time-section">
            <div class="content-wrapper">
                <p class="title">视频服务时间：</p>
                <p class="content">
                    <span class="left">
                        <span class="label">工作日：</span>
                        <span class="value">
                            {{ workTime[0].startTime }} -
                            {{ workTime[0].endTime }}
                        </span>
                    </span>
                    <span class="right">
                        <span class="label">周末：</span>
                        <span class="value">
                            {{ workTime[1].startTime }} -
                            {{ workTime[1].endTime }}
                        </span>
                    </span>
                </p>
            </div>
        </div> -->
        <div class="service-wrapper">
            <OtherService />
        </div>
        <WorktimeError
            :workTime="workTime[curSceneId]"
            :show="showWorktimeError"
            :isWorkDay="isWorkDay"
            @close="
                () => {
                    showWorktimeError = false;
                }
            "
        />
        <SystemError
            :show="showSystemError"
            @close="
                () => {
                    showSystemError = false;
                }
            "
        />
        <van-loading v-if="showLoading" size="48px" vertical> </van-loading>
    </div>
</template>

<script>
import Vue from "vue";
import { Loading, Notify } from "vant";
Vue.use(Loading);
Vue.use(Notify);
import { mapState, mapActions } from "vuex";
import OtherService from "./OtherService.vue";
import WorktimeError from "../error/WorktimeError.vue";
import SystemError from "../error/SystemError.vue";
import {
    isInWechatMP,
    navigateTo,
    isBetweenTime,
    matchSceneName,
} from "../../lib/util";
import {
    updateUserInfo,
    getUserInfo,
    getDeviceInfo,
    login,
    getSceneList,
    getWorkTime,
} from "../../api/api";
import { version } from "../../../package.json";
import { productLineList, branchList } from "../../lib/definition";
// import { worktime } from "../../mock/worktime";
export default {
    components: { OtherService, WorktimeError, SystemError },
    props: {
        ticket: {
            type: Object,
            default() {
                return {};
            },
        },
    },
    data() {
        return {
            phone: "",
            openid: "",
            mid: "", // 序列号
            mode: "", // 机型
            modeType: "", // 机型对应类型
            isSupportVideoCall: false, // 是否支持视频
            status: 1, // 0可呼叫 | 1无设备 | 2不可呼叫 | 3非工作时间
            showWorktimeError: false,
            isWorkDay: true, // 是否工作日
            showSystemError: false,
            showLoading: false,
            curTicketId: "", // 工单号
            scenList: [], // 场景列表
            version: version,
            workTime: {}, // 工作时间
            workDay: {}, // 工作日
            getSettings: false, // 是否获取非工作日/工作时间配置
            curSceneId: "", // 当前的scene id
            sceneMap: {}, // scene name - scene id
            productLine: "", // 产品线
            salesOffice: "", // 分公司
            serviceScene: [], // 服务场景
            currentTimeDiff: 0, // 当前时间差
        };
    },
    created() {
        console.warn("created ", this.$route);
        // phone=&mid=&openid=&model=&status=&scan=&sceneId=&auth=&code=&login=
        // 小程序内扫码进入 mid model status
        if (
            this.$route.query.mid &&
            this.$route.query.model &&
            this.$route.query.status
        ) {
            this.status = parseInt(this.$route.query.status);
            this.mid = this.$route.query.mid;
            this.mode = this.$route.query.model;
            this.productLine = this.$route.query.productLine;
            this.salesOffice = this.$route.query.salesOffice;
            this.ZQD_ID = this.$route.query.ZQD_ID;
            localStorage.setItem("mindray-mid", this.mid);
            localStorage.setItem("mindray-mode", this.mode);
            localStorage.setItem("mindray-status", this.status);
            localStorage.setItem("mindray-product-line", this.productLine);
            localStorage.setItem("mindray-sales-office", this.salesOffice);
            localStorage.setItem("mindray-ZQD_ID", this.ZQD_ID);
        } else {
            if (localStorage.getItem("mindray-status")) {
                this.status = parseInt(localStorage.getItem("mindray-status"));
            }
            this.mid = localStorage.getItem("mindray-mid") || "";
            this.mode = localStorage.getItem("mindray-mode") || "";
            this.productLine =
                localStorage.getItem("mindray-product-line") || "";
            this.salesOffice =
                localStorage.getItem("mindray-sales-office") || "";
            this.ZQD_ID = localStorage.getItem("mindray-ZQD_ID") || "";
        }
        // 手机授权进入
        if (
            this.$route.query.auth === "true" &&
            this.$route.query.sceneId &&
            this.$route.query.code &&
            this.$route.query.phone
        ) {
            localStorage.setItem("phoneNumber", this.$route.query.phone);
            const headerId = localStorage.getItem("mindary_header_scene_id");
            this.$router.replace({
                path: "/call",
                query: {
                    id: this.$route.query.sceneId,
                    phone: this.$route.query.phone,
                    headerId: headerId,
                },
            });
        }
    },
    computed: {
        ...mapState("app", ["curTab"]),
        ...mapState("user", ["deviceStatus"]),
    },
    watch: {
        mid(valNew) {
            localStorage.setItem("mindray-mid", valNew);
        },
        phone(valNew) {
            if (valNew) {
                localStorage.setItem("phoneNumber", valNew);
            }
        },

        curTab(newVal, oldVal) {
            if (newVal === oldVal) return;
            if (newVal === 0) {
                this.phone = localStorage.getItem("phoneNumber") || "";
                this.mid = localStorage.getItem("mindray-mid") || "";
                this.mode = localStorage.getItem("mindray-mode") || "";
                if (localStorage.getItem("mindray-status")) {
                    this.status = parseInt(
                        localStorage.getItem("mindray-status")
                    );
                }
                this.productLine =
                    localStorage.getItem("mindray-product-line") || "";
                this.salesOffice =
                    localStorage.getItem("mindray-sales-office") || "";
                this.ZQD_ID = localStorage.getItem("mindray-ZQD_ID") || "";

                // 删除非工作时间
                // if (this.scenList[0] && this.status === 3) {
                //     this.$nextTick(async () => {
                //         // 查询工作时间
                //         await this.getWorkTime(this.scenList[0].id);
                //         if (this.checkWorkTime()) {
                //             this.status = 0;
                //         }
                //     });
                // }
            }
        },
        status(newVal) {
            localStorage.setItem("mindray-status", newVal);
        },
        mode(newVal) {
            localStorage.setItem("mindray-mode", newVal);
        },
    },
    mounted() {
        // https://localhost:3000/?phone=12345678911&mid=TT-0C001010&openid=
        this.init();
        document.addEventListener("visibilitychange", () => {
            // console.warn("visibilityState ", document.visibilityState);
        });
    },
    methods: {
        ...mapActions("app", ["setTicketId"]),
        ...mapActions("user", [
            "setOpenid",
            "setPhone",
            "setMid",
            "setModeType",
            "setId",
            "setDeviceStatus",
        ]),

        async init() {
            this.openid =
                this.$route.query.openid || localStorage.getItem("openid");

            await this.login();

            this.phone = localStorage.getItem("phoneNumber") || "";
            this.mid =
                this.$route.query.mid ||
                localStorage.getItem("mindray-mid") ||
                "";

            console.warn("init ", this.phone, this.mid, this.openid);

            //
            this.setOpenid(this.openid);
            this.setPhone(this.phone);
            this.setMid(this.mid);

            if (!this.mid) {
                await this.getUserInfo();
            }

            if (this.mid) {
                this.updateUserInfo();
                this.getDeviceInfo(this.mid);
            } else {
                this.status = 1;
            }
        },

        async login() {
            try {
                const resp = await login(this.openid, mindrayOrg);
                const { code, data } = resp.data;
                if (code === 200 && data) {
                    localStorage.setItem("mindary_token", data.token);
                    await this.getSceneList();
                } else {
                    console.warn("login warn ", resp);
                    this.showSystemError = true;
                }
            } catch (error) {
                console.error("login error ", error);
                this.showSystemError = true;
            }
        },

        async getSceneList() {
            this.scenList = [];
            getSceneList()
                .then(async (resp) => {
                    const { scenList } = resp.data;
                    if (
                        resp.status === 200 &&
                        scenList &&
                        scenList.length > 0
                    ) {
                        // name: "应用结果类" | "设备故障类"
                        let sceneName = "";
                        scenList.map((item) => {
                            const names = item.name.split("-");
                            if (names.length == 2) {
                                // 所属分公司-服务场景
                                if (!branchList.includes(names[0])) {
                                    branchList.push(names[0]);
                                }
                                sceneName = names[1];
                            } else if (names.length == 3) {
                                // 产品线-所属分公司-服务场景
                                if (!productLineList.includes(names[0])) {
                                    productLineList.push(names[0]);
                                }
                                if (!branchList.includes(names[1])) {
                                    branchList.push(names[1]);
                                }
                                sceneName = names[2];
                            }
                            this.sceneMap[item.name] = item.id;
                            this.scenList.push(item);
                            if (sceneName.includes("故障")) {
                                this.serviceScene[0] = sceneName;
                            } else if (sceneName.includes("应用")) {
                                this.serviceScene[1] = sceneName;
                            }
                        });
                        // 查询工作时间
                        // if (this.scenList[0]) {
                        //     await this.getWorkTime(this.scenList[0].id);
                        // }
                        // if (this.scenList[1]) {
                        //     await this.getWorkTime(this.scenList[1].id);
                        // }
                        this.scenList.map(async (item) => {
                            await this.getWorkTime(item.id);
                        });
                        console.log(
                            "scene ",
                            this.sceneMap,
                            this.scenList,
                            this.workTime,
                            productLineList,
                            branchList
                        );
                    } else {
                        console.warn("get scene list warn ", resp);
                        this.showSystemError = true;
                    }
                })
                .catch((err) => {
                    console.error("get scene list error ", err);
                    this.showSystemError = true;
                });
        },

        async getUserInfo() {
            try {
                const resp = await getUserInfo(this.openid);
                const { code, data } = resp.data;
                if (code === "0000" && data) {
                    this.id = data.id;
                    this.phone = data.phone || "";
                    this.mid = data.sn;
                    this.setPhone(this.phone);
                    this.setMid(this.mid);
                    this.setId(this.id);
                    localStorage.setItem("phoneNumber", this.phone);
                } else {
                    console.warn("get user info error ", resp);
                }
            } catch (error) {
                console.error("get user info error ", error);
            }
        },
        updateUserInfo() {
            updateUserInfo(this.openid, this.mid, this.phone)
                .then((resp) => {
                    const { code, data } = resp.data;
                    if (code === "0000" && data) {
                        this.id = data.id;
                    } else {
                        console.warn("update user info error ", resp);
                    }
                })
                .catch((err) => {
                    console.error("update user info error ", err);
                });
        },
        async getDeviceInfo(sn) {
            try {
                const resp = await getDeviceInfo(sn);
                const { code, data } = resp.data;
                if (code === "0000" && data) {
                    // PROD_MODEL 	机型
                    // ZJXZCLB 机型支持类别
                    // ZSP_FLAG 是否支持视频呼叫服务，如果是'X'，表示支持
                    // SALES_OFFICE 分公司名称
                    // DIVISION 产品线名称
                    this.mode = data.PROD_MODEL || "";
                    this.modeType = data.ZJXZCLB || "";
                    this.salesOffice = data.SALES_OFFICE || "";
                    this.productLine = data.DIVISION || "";
                    this.isSupportVideoCall = data.ZSP_FLAG === "X"; // TODO
                    this.status = this.isSupportVideoCall ? 0 : 2;
                    this.ZQD_ID = data.ZQD_ID || "";

                    // 缓存
                    localStorage.setItem("mindray-mid", this.mid);
                    localStorage.setItem("mindray-mode", this.mode);
                    localStorage.setItem("mindray-status", this.status);
                    localStorage.setItem(
                        "mindray-product-line",
                        this.productLine
                    );
                    localStorage.setItem(
                        "mindray-sales-office",
                        this.salesOffice
                    );
                    localStorage.setItem("mindray-ZQD_ID", this.ZQD_ID);
                    //
                    // if (
                    //     this.$route.query.auth === "true" &&
                    //     this.$route.query.sceneId &&
                    //     this.$route.query.code
                    // ) {
                    //     this.setModeType(this.$route.query.code);
                    //     //
                    //     this.$nextTick(() => {
                    //         this.$router.replace({
                    //             path: "/call",
                    //             query: { id: this.$route.query.sceneId },
                    //         });
                    //     });
                    // } else
                    if (
                        this.$route.query.scan === "true" &&
                        this.status === 2 &&
                        this.mid &&
                        isInWechatMP()
                    ) {
                        // /pages/cscwork/index
                        // navigateTo("/pages/cscwork/index?mid=" + this.mid);
                    }
                } else {
                    console.warn("get device info error ", resp);
                }
            } catch (error) {
                console.error("get device info error ", error);
            }
        },
        async getWorkTime(sceneId) {
            try {
                const resp = await getWorkTime(sceneId);
                const { code, data } = resp.data;
                if (code === "0000" && data) {
                    const { currentTime, workTime, isWorkDay } = data;
                    this.currentTimeDiff =
                        new Date(currentTime).getTime() -
                            new Date().getTime() || 0;
                    console.log("currentTimeDiff", this.currentTimeDiff);
                    const result = this.parseWorkTime(workTime);
                    this.workTime[sceneId] = result;
                    this.workDay[sceneId] = isWorkDay;
                    localStorage.setItem(sceneId, isWorkDay ? 1 : 0);
                    this.getSettings = true;
                } else {
                    console.warn("get worktime error ", resp);
                    this.showSystemError = true;
                }
            } catch (error) {
                console.error("get worktime error ", error);
                this.showSystemError = true;
            }
        },
        onSearch() {
            if (isInWechatMP()) {
                navigateTo(
                    "/pages/scancode/index?token=" +
                        localStorage.getItem("mindary_token") +
                        "&phone=" +
                        localStorage.getItem("phoneNumber") +
                        "&mid=" +
                        this.mid
                );
            } else {
                this.$router.push("/search");
            }
        },
        async onCall(sceneName, modeType) {
            console.log("onCall", sceneName, modeType, this.workTime);
            // this.sceneMap['总部-设备故障类']
            // this.sceneMap['总部-应用结果类']
            if (!sceneName || !this.getSettings) {
                Notify({
                    type: "warning",
                    message: "请稍后，正在拉取服务配置信息",
                });
                return;
            }
            const name = matchSceneName(
                this.productLine,
                this.salesOffice,
                sceneName,
                this.ZQD_ID
            );
            const id = this.sceneMap[name];
            console.log("match scene name ", name, id);
            // 总部场景id
            const headerName = matchSceneName(
                this.productLine,
                "",
                sceneName,
                ""
            );
            const headerId = this.sceneMap[headerName];
            console.log("headerName ", headerName, headerId);

            if (!id || !this.getSettings) {
                Notify({
                    type: "warning",
                    message: "请稍后，正在拉取服务配置信息",
                });
                return;
            }

            // 1无设备 | 2不可呼叫
            if ([1, 2, 3].includes(this.status)) {
                return;
            }
            this.curSceneId = id;
            this.modeType = modeType;
            this.setModeType(modeType);
            // await this.getDeviceInfo(this.mid);
            // 1无设备 | 2不可呼叫
            if ([1, 2, 3].includes(this.status)) {
                return;
            }
            // 查询工作时间
            // await this.getWorkTime(id);
            if (!this.checkWorkTime(id)) {
                this.showWorktimeError = true;
                // this.status = 3; // 删除非工作时间
                return;
            }

            console.log(
                "this.workDay",
                this.workDay,
                id,
                this.workDay[id],
                localStorage.getItem(id)
            );
            // 查询非工作日
            if (localStorage.getItem(id) == 0) {
                this.showWorktimeError = true;
                this.isWorkDay = false;
                return;
            }
            const param = {
                openId: this.openid,
                mid: this.mid,
                ZFWZL_CODE: modeType,
                sceneId: id,
            };
            localStorage.setItem(
                "mindray-cunstomer-call-param",
                JSON.stringify(param)
            );
            if (!this.phone || this.phone.length < 11) {
                await this.getUserInfo();
            }
            if (localStorage.getItem("isRejectCameraPermission") === "1") {
                this.phone = ""; // 要求重新获取手机号
            }
            if (!this.phone || this.phone.length < 11) {
                // to login
                if (isInWechatMP()) {
                    // 缓存总部场景id
                    localStorage.setItem("mindary_header_scene_id", headerId);
                    navigateTo(
                        `/pages/login/index?sceneId=${id}&code=${modeType}&token=` +
                            localStorage.getItem("mindary_token")
                    );
                }
                return;
            }
            localStorage.setItem("phoneNumber", this.phone);
            this.$router.replace({
                path: "/call",
                query: { id: id, phone: this.phone, headerId: headerId },
            });
        },
        checkWorkTime(sceneId) {
            if (!this.workTime[sceneId] || this.workTime[sceneId].length <= 0) {
                return true;
            }
            const now = new Date().getTime() + this.currentTimeDiff;
            console.log("now", new Date().getTime(), this.currentTimeDiff);
            const weekofday = this.$moment(now).day();
            if (weekofday >= 1 && weekofday <= 5) {
                return isBetweenTime(
                    now,
                    this.workTime[sceneId][0].startTime,
                    this.workTime[sceneId][0].endTime
                );
            } else {
                return isBetweenTime(
                    now,
                    this.workTime[sceneId][1].startTime,
                    this.workTime[sceneId][1].endTime
                );
            }
        },
        parseWorkTime(workTime) {
            let result = [];
            if (workTime && workTime.length > 0) {
                workTime.map((item) => {
                    const { startTime, endTime } = item;
                    // // 8:00:00 -> [8, 00, 00]
                    // let times = item.startTime.split(":");
                    // item.startTime = times[0] + ":" + times[1];
                    // times = item.endTime.split(":");
                    // item.endTime = times[0] + ":" + times[1];
                    result.push({ startTime: startTime, endTime: endTime });
                });
                if (workTime.length === 1 && result[0]) {
                    result.push(result[0]);
                }
            }
            return result;
        },
    },
};
</script>

<style lang="less" scoped>
.device-info-container {
    width: 100%;
    height: 100%;

    .title-wrapper {
        width: 100%;
        height: 305px;
        // background: linear-gradient(140deg, #fc5b60 0%, #9c0109 100%);
        // box-shadow: 0px 2px 24px 0px rgba(0, 0, 0, 0.08),
        //     inset 1px 3px 7px 0px rgba(255, 255, 255, 0.21);
        display: flex;
        flex-direction: column;
        background-image: url("../../assets/img/title-back.png");
        background-position: center -44px;
        background-repeat: no-repeat;
        background-size: 100% 305px;

        .logo {
            width: 86px;
            height: 15px;
            background-image: url("../../assets/img/mlogo.png");
            background-size: 86px 15px;
            display: inline-block;
            background-position: center;
            background-repeat: no-repeat;
            margin: 12px 0 0 19px;
        }
        .title {
            width: 178px;
            height: 47px;
            background-image: url("../../assets/img/title-text.png");
            background-size: 178px 47px;
            display: inline-block;
            background-position: center;
            background-repeat: no-repeat;
            margin: 37px 0 0 19px;
        }
    }

    .device-info-wrapper {
        width: 100%;
        height: 106px;
        background: #fcf7f5;
        border-radius: 20px 20px 0px 0px;
        padding: 14px 20px;
        box-sizing: border-box;
        margin-top: calc(161px - 305px);
        position: relative;

        .title {
            text-align: left;
            display: flex;
            align-items: center;
            margin: 0;

            .icon {
                width: 22px;
                height: 22px;
                background-image: url("../../assets/img/device-info.png");
                background-size: 22px 22px;
                display: inline-block;
                background-position: center;
                background-repeat: no-repeat;
            }
            .label {
                font-size: 15px;
                font-weight: bold;
                color: #000000;
                line-height: 21px;
                margin-left: 6px;
            }
        }
        .device-info-content {
            font-size: 14px;
            color: #3b3d42;
            line-height: 20px;
            text-align: left;
            margin-top: 15px;

            .left {
                width: 50%;
                display: inline-block;
            }
            .right {
                width: 50%;
                display: inline-block;
            }

            @media only screen and (max-width: 320px) {
                margin-top: 5px;
                .left {
                    width: 100%;
                    display: inline-block;
                    margin-top: 5px;
                }
                .right {
                    width: 100%;
                    display: inline-block;
                    margin-top: 10px;
                }
            }

            .label {
                font-weight: 400;
            }

            .value {
                font-weight: bold;
            }
        }
        .content {
            width: 280px;
            font-size: 14px;
            font-weight: 400;
            color: #808485;
            line-height: 20px;
            margin-left: calc(50% - 128px);
            margin-top: 15px;
        }
    }

    .disable {
        filter: grayscale(1);
    }

    .call-button-container {
        width: 100%;
        padding: 9px 20px;
        box-sizing: border-box;
    }

    .button-back {
        background-size: contain;
        display: inline-block;
        background-position: center;
        background-repeat: no-repeat;
        pointer-events: none;
    }
    .button-section-1 {
        width: 118px;
        height: 83px;
        background-image: url("../../assets/img/button-back-1.png");
        position: relative;
        top: -80px;
        left: 78px;
    }
    .button-section-2 {
        width: 121px;
        height: 71px;
        background-image: url("../../assets/img/button-back-2.png");
        position: relative;
        top: -71px;
        left: 79px;
    }
    .button-section-disable-1 {
        width: 118px;
        height: 83px;
        background-image: url("../../assets/img/button-back-gray-1.png");
        position: relative;
        top: -80px;
        left: 78px;
    }
    .button-section-disable-2 {
        width: 121px;
        height: 71px;
        background-image: url("../../assets/img/button-back-gray-2.png");
        position: relative;
        top: -71px;
        left: 79px;
    }
    .call-button-section {
        width: 100%;
        height: 62px;
        background: #d8d8d8;
        box-shadow: 2px 3px 12px 0px rgba(0, 0, 0, 0.12);
        border-radius: 34px;
        margin: 16px 0 32px 0;
        pointer-events: none;

        .call-button-wrapper {
            width: 100%;
            height: 62px;
            // box-shadow: 2px 3px 12px 0px rgba(0, 0, 0, 0.12);
            // border-radius: 34px;
            padding: 8px 27px;
            box-sizing: border-box;
            pointer-events: auto;

            .title {
                text-align: left;
                display: flex;
                align-items: center;
                margin: 0;

                .icon {
                    width: 15px;
                    height: 15px;
                    background-image: url("../../assets/img/video-call-icon.png");
                    background-size: 12px 9px;
                    display: inline-block;
                    background-position: center;
                    background-repeat: no-repeat;
                }
                .label {
                    font-size: 15px;
                    font-weight: bold;
                    color: #ffffff;
                    line-height: 21px;
                    margin-left: 6px;
                }
            }
            .button {
                text-align: left;
                display: flex;
                align-items: center;
                margin: 0;

                .label {
                    font-size: 12px;
                    font-weight: 400;
                    color: #ffffff;
                    line-height: 17px;
                    margin-top: 4px;
                }
                .icon {
                    width: 5px;
                    height: 10px;
                    display: inline-block;
                    // background-image: url("../../assets/img/right-icon.png");
                    // background-size: 12px 9px;
                    // background-position: center;
                    // background-repeat: no-repeat;
                    margin-left: 6px;
                }
            }
        }

        .button-wrapper-1 {
            background: linear-gradient(317deg, #ffe3da 0%, #f45f68 100%);
            box-shadow: 2px 3px 12px 0px rgba(0, 0, 0, 0.14);
            border-radius: 34px;
        }
        .button-wrapper-2 {
            background: linear-gradient(314deg, #fff0db 0%, #f3ba57 100%);
            box-shadow: 2px 3px 12px 0px rgba(0, 0, 0, 0.14);
            border-radius: 34px;
        }
    }
    .search-device-section {
        width: 100%;
        padding: 0 20px 7px 20px;
        box-sizing: border-box;

        .callable-title-1 {
            width: fit-content;
            height: 26px;
            border-radius: 13px;
            border: 1px solid #dcdcdc;
            margin: 0 auto;
            text-align: left;
            display: flex;
            align-items: center;
            padding: 0 10px 0 4px;
            box-sizing: border-box;
        }
        .icon-1 {
            width: 18px;
            height: 18px;
            background-image: url("../../assets/img/scan-main.png");
            background-size: 18px 18px;
            display: inline-block;
            background-position: center;
            background-repeat: no-repeat;
        }
        .label-1 {
            font-size: 14px;
            font-weight: 400;
            color: #5a5e66;
            line-height: 26px;
            margin-left: 4px;
        }

        .callable-title {
            width: fit-content;
            height: 26px;
            border-radius: 13px;
            border: 1px solid #dcdcdc;
            margin: 0 auto;
            text-align: left;
            display: flex;
            align-items: center;
            padding: 0 10px 0 4px;
            box-sizing: border-box;
            animation: border-pulse 2s infinite;
        }
        .icon {
            width: 18px;
            height: 18px;
            background-image: url("../../assets/img/scan-main.png");
            background-size: 18px 18px;
            display: inline-block;
            background-position: center;
            background-repeat: no-repeat;
        }
        .label {
            font-size: 14px;
            font-weight: 400;
            color: #5a5e66;
            line-height: 26px;
            margin-left: 4px;
            animation: text-pulse 2s infinite;
        }
        @keyframes border-pulse {
            0%,
            100% {
                border-color: #dcdcdc;
                transform: scale(1);
            }
            50% {
                border-color: red;
                transform: scale(1.15);
            }
        }

        @keyframes text-pulse {
            0%,
            100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.05);
                color: red;
            }
        }
    }

    .working-time-section {
        width: 100%;
        height: 74px;
        padding: 0 20px 0 20px;
        box-sizing: border-box;
        margin-top: 13px;

        .content-wrapper {
            width: 100%;
            height: 100%;
            padding: 12px 16px 0 16px;
            box-sizing: border-box;
            background: #f3f7fd;
            border-radius: 8px;
            text-align: left;

            .title {
                font-size: 14px;
                font-weight: bold;
                color: #4e97f8;
                line-height: 20px;
                margin: 0;
            }

            .content {
                font-size: 14px;
                color: #96999c;
                line-height: 20px;
                margin: 0;
                margin-top: 6px;

                .left {
                    width: 50%;
                    display: inline-block;
                }
                .right {
                    width: 50%;
                    display: inline-block;
                }

                .label {
                    font-weight: 400;
                }

                .value {
                    font-weight: 500;
                }
            }
        }
    }

    .van-loading {
        position: absolute;
        top: 50%;
        left: calc(50% - 24px);
    }

    .time {
        position: relative;
        top: 18px;
        text-align: left;
        left: 20px;
        font-size: 12px;
        color: #fff;
        width: fit-content;
    }
}
</style>
